<template>
  <view class="main">
    <familyInner @changePerson="changePerson" @getFamilyList="getFamilyList"></familyInner>

    <!-- 用户购买的所有服务单 -->
    <view class="order-wrap">
      <view v-if="filterInserviceOrderList.length" class="order-list-wrap">
        <view v-for="(order, index) in filterInserviceOrderList" :key="index" :class="['order', 'order' + index]">
          <!-- 服务订单标题 -->
          <view>
            <view class="p-info">
              <view class="p-i-name-w">
                <text class="p-i-name">{{ order.insurancePackageName }}</text>
                <view class="p-i-des">服务对象：{{ order.insuredName }}</view>
                <view class="p-i-des">订单日期：{{ order.orderDate | formatOrderDate }}</view>
              </view>
              <view class="p-i-operate">
                <text class="p-i-status" :style="{ background: serviceStatusColor[order.status] }">{{
                  order.status | getOrderStatusName
                }}</text>

                <!-- teamOrderNo存在表面有保险，待激活或者服务中，已支付，无问询或者问询失败 -->
                <view class="p-i-btn p-detail" @click="checkServiceDetail(order)">查看详情</view>

                <!-- <view v-if="showInsuranceButton(order)" class="p-i-btn marginL20" @click="beActive(order)"> 激活 </view> -->
                <view
                  v-if="order.status === 2 && order.payStatus === 0 && order.amount"
                  class="p-i-btn marginL20"
                  @click="payment(order)"
                >
                  支付
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="ajaxDone && filterInserviceOrderList.length === 0" class="pkg-tip-wrap">
        <view class="zwjl"></view>
      </view>
    </view>
  </view>
</template>
<script>
// 服务页接口  获取当前用户的服务订单
import { getInsuranceOrder, getFamilyInsuranceOrder } from '@/api/service.js';
// import { getInserviceInfoByOrderId, getInsureDetail, getInsuranceOrder } from '@/api/service.js';
// 引入统计
import { tongji } from '@/utils/tools.js';
import { commonProjectType } from '@/common/baseUrl.js';
import { inquiryMixin } from '@/common/mixin.js';
import { familyInner } from '@/components/familyInner';

export default {
  components: {
    familyInner
  },
  filters: {
    getOrderStatusName(key) {
      let orderKeyValue = {
        2: '待激活',
        3: '服务中',
        4: '已完成',
        6: '已终止'
      };
      return orderKeyValue[key] || '未知';
    },
    formatOrderDate(value) {
      if (value) {
        return value.split(' ')[0];
      } else {
        return '';
      }
    }
  },
  mixins: [inquiryMixin],
  data() {
    return {
      patientId: '',
      inserviceOrderList: [], // 用户购买的的服务订单，服务订单下的服务产品中，保险跟其他的产品不同，需要另外通过接口获取tnnd
      filterInserviceOrderList: [],
      serviceStatusColor: {
        2: '#FFBE00',
        3: '#8ED7B1',
        4: '#F25559',
        6: '#F34E1C'
      },
      ajaxDone: false
    };
  },
  onLoad(option) {
    // 当前用户id
    this.patientId = this.$store.state.join.patientid;
  },

  computed: {
    // 是否展示登记保险按钮
    // showInsuranceButton() {
    //   return function (order) {
    //     return (
    //       order.teamOrderNo &&
    //       (order.status === 2 || order.status === 3) &&
    //       (order.payStatus === 1 || order.amount === 0) &&
    //       (!order.healthEnquiries || (Array.isArray(order.healthEnquiries) && order.healthEnquiries.length === 0)) &&
    //       order.inserviceInfo.needInquiry
    //     );
    //   };
    // }
  },
  methods: {
    getFamilyList(familyList) {
      // this.familyList = familyList;
      // familyList[0]是全家
      let patientIdStr = familyList
        .slice(1)
        .map((item) => {
          return item.insuredId;
        })
        .join(',');

      // 获取当前用户家人的服务订单
      getFamilyInsuranceOrder(patientIdStr).then((res) => {
        this.ajaxDone = true;
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户服务单失败' });
          return;
        }
        if (res.data.length > 0) {
          // 用户购买的服务订单

          this.inserviceOrderList = res.data.filter((oData) => {
            // 只获取type为6的订单
            return oData.projectType === commonProjectType;
          });
          this.filterInserviceOrderList = this.inserviceOrderList;
          // console.log('this.inserviceOrderList:', this.inserviceOrderList.length);
        }
      });
    },
    changePerson(index, relation, insuredId) {
      this.ajaxDone = false;
      // 全家
      if (index === 0) {
        this.filterInserviceOrderList = this.inserviceOrderList;
      } else {
        this.getInserviceById(insuredId);
      }
    },

    checkServiceDetail(order) {
      // 查看详情
      this.$wxPromise.navigateTo({
        url: '/pages/service/detail?orderId=' + order.orderId + '&patientId=' + this.patientId
      });
      tongji('c94935aa-1865-4f9e-9c9f-cc8964ca21b6');
    },

    /* eslint-disable*/
    getInserviceById(patientId) {
      // 接口  查询被保险人服务单  /insuranceOrder
      getInsuranceOrder(patientId).then((res) => {
        this.ajaxDone = true;
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户服务单失败' });
          return;
        }
        if (res.data.length > 0) {
          // 用户购买的服务订单
          this.filterInserviceOrderList = res.data.filter((oData) => {
            // 只获取type为6的订单
            return oData.projectType === commonProjectType;
          });

          // 对inserviceOrderList 进行排序 按时间先后进行排序
          // let temp2inserviceOrderList = tempInserviceOrderList.sort((item1, item2) => {
          //   return item2.orderDate - item1.orderDate;
          // });

          // if (temp2inserviceOrderList.length > 0) {
          //   let sucNum = 0;
          //   temp2inserviceOrderList.forEach(async (order, oIndex) => {
          //     let orderId = order.orderId;
          //     // 获取服务单详情 /patients/insurance_order/
          //     getInserviceInfoByOrderId(orderId).then(async (res) => {
          //       if (res.code !== 0) {
          //         uni.showToast({ title: '获取详情失败' });
          //         return;
          //       }
          //       let inserviceInfo = res.data;
          //       // 判断是否有保险订单，有保险订单再执行获取等待期和问询的操作
          //       let hasInsure = order.products.some((item) => {
          //         return item.insuranceProductType === 1;
          //       });

          //       if (hasInsure) {
          //         // 如果存在保单开始时间，则说明该服务单含有保险，且有保险等待期。如果服务单不含保险，getInsureDetail获取等待期会报错
          //         let insureResult = await getInsureDetail(orderId);
          //         // 是否有问询
          //         inserviceInfo.healthEnquiries = insureResult.data.healthEnquiries || [];
          //       }

          //       order.inserviceInfo = inserviceInfo;
          //       sucNum++;
          //       if (sucNum === temp2inserviceOrderList.length) {
          //         // 隐藏loading
          //         // uni.hideLoading();
          //         this.inserviceOrderList = temp2inserviceOrderList;
          //       }
          //     });
          // });
        } else {
          // uni.hideLoading();
          this.inserviceOrderList = [];
        }
      });
    },

    // 支付按钮
    async payment(order) {
      this.$wxPromise.navigateTo({
        url: '/pagesC/pay/index?orderId=' + order.orderId
      });
    },
    // 激活按钮
    beActive(order) {
      this.inquiryMixin({
        insuranceServices: order.inserviceInfo.packageProduct,
        teamOrderNo: order.teamOrderNo,
        insuredId: this.patientId,
        packageId: order.insurancePackageId,
        orderId: order.orderId
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  margin-top: -5rpx;
  margin-left: -5rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  .family {
    position: relative;
    padding-top: 10rpx; // 为了是让  family-content的圆角显示完整，要不然会有被切掉的感觉
    .family-bg-red {
      overflow-x: scroll;
      background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 180rpx;
    }
    .family-content {
      width: 700rpx;
      background: #fff;
      border-radius: 24rpx;
      padding: 32rpx 24rpx;
      margin: auto;
      z-index: 100;
      position: relative;
      box-sizing: border-box;
    }
    .f-inner {
      display: flex;
      align-items: center;
      width: max-content;
      padding-right: 80rpx;
      width: 100%;
      .f-item {
        width: 96rpx;
        height: 130rpx;
        margin-right: 44rpx;
        position: relative;
        .f-logo {
          width: 96rpx;
          height: 96rpx;
          background: white;
          border-radius: 96rpx;
          padding: 8rpx;
          box-sizing: border-box;
          overflow: visible;
          position: relative;
          // &.f-logo0 {
          //   background: none;
          //   border-radius: 16rpx;
          //   padding: 0;
          // }
          &.f-b-imgw-boy {
            background: #e9f8ff;
          }
          &.f-b-imgw-girl {
            background: #ffefef;
          }
          .f-logo-img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
          .f-logo-img-icon {
            position: absolute;
            width: 80rpx;
            height: 32rpx;
            left: 50%;
            transform: translateX(-50%);
            bottom: -16rpx;
          }
        }
        .f-name {
          width: 100%;
          text-align: center;
          margin-top: 20rpx;
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.6);
          &.active {
            color: white;
          }
        }
        .f-san {
          position: absolute;
          width: 0rpx;
          height: 0rpx;
          left: 50%;
          transform: translateX(-50%);
          border-bottom: 20rpx solid #e8e8e8;
          border-left: 20rpx solid transparent;
          border-right: 20rpx solid transparent;
          bottom: -2rpx;
        }
      }
      .f-add {
        width: 96rpx;
        height: 130rpx;
        margin-right: 40rpx;
        .f-a-btn {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          text-align: center;
          width: 96rpx;
          height: 96rpx;
          line-height: 96rpx;
          color: white;
          font-size: 72rpx;
          position: relative;
          border-radius: 96rpx;
          image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 64rpx;
            height: 64rpx;
            transform: translate(-50%, -50%);
          }
        }
        .f-name {
          text-align: center;
          width: 100%;
          margin-top: 20rpx;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .p-user {
      width: 100%;
      height: 90rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 22rpx 24rpx;
      box-sizing: border-box;
      margin: auto;
      display: flex;
      align-items: center;
      border-top: 1px solid #e8e8e8;
      .p-u-logo {
        width: 40rpx;
        height: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .p-u-name {
        margin-left: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.55);
      }
      .p-u-line {
        margin: 0px 24rpx;
        border-left: 1rpx solid #e8e8e8;
        width: 0;
        height: 32rpx;
        line-height: 32rpx;
      }

      .p-u-goods {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.55);
      }
    }
  }
  // 服务包样式
  .order-wrap {
    .order {
      width: 700rpx;
      border-radius: 24rpx;
      background: white;
      box-sizing: border-box;
      margin: auto;
    }

    .pkg-tip-wrap {
      width: 100%;
      border-radius: 24rpx;
      padding: 74rpx 0rpx;
      box-sizing: border-box;
      .pkg-tip {
        width: 700rpx;
        font-size: 36rpx;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        border-radius: 24rpx;
      }
    }
    .order-list-wrap {
      .order {
        width: 700rpx;
        margin: auto;
        margin-top: 24rpx;
        border-radius: 24rpx;
        background: #ffffff;
      }
    }
  }

  .pkg {
    width: 700rpx;
    margin: auto;
    position: relative;
    padding: 48rpx 0rpx;
  }
  .p-info {
    width: 700rpx;
    padding: 36rpx 24rpx;
    box-sizing: border-box;
    margin: auto;
    .p-i-name-w {
      width: 100%;
      .p-i-name {
        font-size: 36rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
      .p-i-des {
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .p-i-operate {
      width: 100%;
      height: 56rpx;
      // display: flex;
      align-items: center;
      // justify-content: space-between;
      text-align: right;
      font-size: 26rpx;
      position: relative;

      .p-i-status {
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        padding: 4rpx 10rpx;
        color: white;
        height: 32rpx;
        line-height: 32rpx;
        word-break: keep-all;
        position: absolute;
        top: 24rpx;
        left: 0;
      }

      .p-detail {
        font-size: 26rpx;
        font-weight: 400;
        color: #2680eb;
        margin-top: 10rpx;
        display: inline-block;
      }
      .p-i-btn {
        display: inline-block;
        width: 144rpx;
        height: 48rpx;
        border: 1px solid #f34e1c;
        border-radius: 32rpx;
        line-height: 48rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }

    .p-i-art {
      margin-top: 20rpx;
      .p-i-a-item {
        display: inline-block;
        font-size: 24rpx;
        color: #2680eb;
        opacity: 1;
        margin-right: 36rpx;
      }
    }
  }
  .p-prod {
    width: 700rpx;
    margin: auto;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    opacity: 1;
    border-radius: 0px 0px 16rpx 16rpx;
    box-sizing: border-box;
    margin-top: -2px;
  }
  .order-checkpro-btn {
    margin-top: 48rpx;
    font-size: 24rpx;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
  .order-line {
    display: none;
    position: relative;
    height: 0rpx;
    border-top: 1rpx solid #e8e8e8;
    margin: auto;
    z-index: 1;
    height: 48rpx;
    margin-top: 48rpx;
    .o-l-left {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      background: $uni-bg-color;
      position: absolute;
      left: -20rpx;
      top: 24rpx;
      top: -24rpx;
    }
    .o-line {
    }
    .o-l-right {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      right: -20rpx;
      top: 24rpx;
      background: $uni-bg-color;
      position: absolute;
      top: -24rpx;
    }
  }
  .order-arrow {
    width: 48rpx;
    height: 48rpx;
    margin: auto;
    margin-bottom: 48rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .g-title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.55);
    opacity: 1;
    margin: auto;
    width: 700rpx;
    padding: 48rpx 24rpx 0rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
  }
  .goods {
    position: relative;
    border-radius: 16rpx;
    box-sizing: border-box;
    position: relative;
    margin: auto;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .g-info {
      .g-i-name {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
        .g-i-name-statusName {
          background: #f25559;
          margin-left: 5rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 10rpx;
          color: white;
          height: 32rpx;
          line-height: 32rpx;
          word-break: keep-all;
        }
      }
      .g-i-com {
        width: 248rpx;
        margin-top: 24rpx;
        height: 40rpx;
        border: 1px solid #f34e1c;
        border-radius: 8rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #f34e1c;
      }
      .g-i-peroid {
        display: flex;
        margin-top: 32rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        .g-i-p-start {
        }
        .g-i-p-start {
        }
      }
      .g-i-art {
        display: flex;
        margin-top: 40rpx;
        .g-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
    }
    .g-apply {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      right: 24rpx;
      width: 144rpx;
      height: 48rpx;
      border: 1px solid #f34e1c;
      border-radius: 32rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 48rpx;
      color: #f34e1c;
    }
  }
  .medicine {
    margin: auto;
    box-sizing: border-box;
    border-radius: 16rpx;
    position: relative;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .m-left {
      // width: 400rpx;
      .m-title {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
      }
      .m-hz {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        display: flex;
      }
      .m-i-art {
        margin-top: 40rpx;
        .m-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
          display: inline-block;
        }
      }
    }
    .m-right {
      position: absolute;
      width: 160rpx;
      height: 56rpx;
      right: 24rpx;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 24rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
    .fl-btn {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 0rpx;
      right: 24rpx;
      align-self: flex-end;
      width: 160rpx;
      height: 56rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
  }

  .fl-list {
    box-sizing: border-box;
    margin: auto;
    border-radius: 16rpx;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .fl-item {
      width: 100%;
      height: 56rpx;
      align-items: center;
      position: relative;
      .fl-logo {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .fl-con {
      }
      .fl-des {
        text-align: left;

        .fl-name {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.9);
          width: 460rpx;
        }
        .fl-info {
          font-size: 24rpx;
          color: rgba(12, 6, 6, 0.3);
          margin-top: 16rpx;
        }
      }
      .fl-i-art {
        display: flex;
        margin-top: 16rpx;
        .fl-i-a-item {
          display: inline-block;
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
      .fl-btn {
        position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        bottom: 0rpx;
        right: 0rpx;
        align-self: flex-end;
        width: 160rpx;
        height: 56rpx;
        border: 1px solid #f34e1c;
        border-radius: 28rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }
  }
  .his {
    margin-top: 44rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    padding-bottom: 44rpx;
  }
  .serviceArticleList {
    // 显示服务详情列表
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    .s-inner {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 10;
      width: 700rpx;
      height: 90%;
      padding: 0rpx 40rpx 32rpx;
      box-sizing: border-box;
      background: white;
      border-radius: 24rpx;
      .s-header {
        width: 100%;
        height: 120rpx;
        line-height: 120rpx;
        position: relative;
        .s-title {
          font-size: 36rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
        }
        .s-icon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: 0;
          top: 40rpx;
        }
      }
      .s-cont {
        .s-c-item {
          height: 60rpx;
          line-height: 60rpx;
          color: #2680eb;
        }
      }
    }
  }
}
.orderTitle {
  color: rgba(0, 0, 0, 0.6);
  font-size: 32rpx;
  position: relative;
  padding-left: 20rpx;
  width: 700rpx;
  margin: auto;
  margin-bottom: 20rpx;
}
.orderTitle::before {
  position: absolute;
  left: 0;
  top: 8rpx;
  content: '';
  width: 6rpx;
  height: 32rpx;
  border-left: 6rpx solid rgba(243, 78, 28, 1);
}
.service-banner {
  width: 654rpx;
  height: 152rpx;
  margin: auto;
  margin-top: 26rpx;
  img {
    width: 100%;
    height: 100%;
  }
}
.service-ad {
  width: 700rpx;
  margin: auto;
  border-radius: 12px;
  background-color: #fff;
  padding: 40rpx 24rpx;
  margin-top: 24rpx;
  box-sizing: border-box;
  .s-ad-title {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
  }
  .s-ad-img {
    margin: auto;
    margin-top: 24rpx;
    width: 654rpx;
    height: 296rpx;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.healthPannel {
  .radiosList {
    display: inline-block;
    width: 120rpx;
    height: auto;
    margin: 20rpx;
    .icon {
      width: 120rpx;
      height: 120rpx;
      position: relative;
      background-color: rgba(233, 248, 255, 1);
      border-radius: 100%;
      &.icon-red {
        background-color: #ffefef;
      }
      img {
        width: 88rpx;
        height: 88rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .mark {
      width: 24rpx;
      height: 24rpx;
      background: red;
      border-radius: 50%;
      position: absolute;
      top: 0px;
      right: 8rpx;
    }
    .name {
      color: rgba(0, 0, 0, 0.9);
      font-size: 28rpx;
      text-align: center;
      padding: 16rpx 0;
    }
  }

  .bgOrigin {
    .icon {
      background-color: #ffefef;
    }
  }
}
.spread-opr {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.55);
  width: 100%;
  margin-top: 20rpx;
  text-align: center;
  height: 40rpx;

  .opr {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .opr-down {
    .opr-img-wrap {
      margin-top: -10rpx;
    }
  }
  .opr-txt {
    display: inline-block;
  }
  .opr-img-wrap {
    width: 24rpx;
    height: 24rpx;
    display: inline-block;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .opr-up {
    image {
      transform: rotate(180deg);
    }
  }
}
.marginR12 {
  margin-right: 20rpx;
}
.marginL20 {
  margin-left: 20rpx;
}
</style>
